<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.添加视口标签 快捷方式：meta:vp -->
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--2.设置网页渲染模式  快捷方式：meta:compat  -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--3.把bootstrap 核心样式（压缩版）引入-->
    <link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
    <style>

        li {
            list-style: none
        }

    </style>
    <title>Document</title>
    <!--6.针对于IE9 以下浏览器做兼容性处理 快捷方式：cc:ie -->
    <!--[if lt IE9 ]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="dropdown">
    <button class="btn btn-primary" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true"
            aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
        {% for i in guojia %}
            <li>{{ i.guojia }}</li>
            <li>
                <ul>
                    {% for j in city %}
                        {% if i.guojia in j.guojia.guojia %}
                            <li><a class=" " href="">{{ j.city }}</a></li>
                        {% endif %}
                    {% endfor %}

                </ul>
            </li>
        {% endfor %}
    </ul>
</div>
<!--4.把jQuery 引入-->
<script src="/static/js/jquery-1.10.2.min.js"></script>
<!--5.把bootstrap 核心脚本文件（压缩版）引入-->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</html>